<template>
	<view @tap="onCell" class="cl-cell" :class="{ 'disabled': disabled, 'active-cell': isLink }">

		<view :style="[sctionStyle]" class="cl-cell__section">

			<view :style="[bodyStyle]" class="cl-cell__body">

				<view class="body__left">

					<view class="body__left__title">
						<view v-if="$slots.icon || icon" class="cl-cell__icon">
							<slot name="icon">
								<uni-icons :custom-prefix="isCustomize ? 'iconfont' : ''" :type="icon" :size="iconSize" :color="iconColor"></uni-icons>
							</slot>
						</view>

						<view :style="[titleStyle]" class="title">{{ title }}</view>
					</view>

					<view v-if="$slots.label || label" class="label">
						<slot name="label">{{ label }}</slot>
					</view>
				</view>

				<view :style="[bodyRightStyle]" class="body__right">
					<slot name="value">{{ value }}</slot>
				</view>

			</view>

			<view v-if="$slots.rightIcon || isLink" class="right-icon">
				<slot name="rightIcon">
					<uni-icons :type="rightIcon" :size="16" color="#999"></uni-icons>
				</slot>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'cl-cell',
		props: {
			// 左侧标题
			title: {
				type: String,
				default: ''
			},
			// 标题下方的描述信息
			label: {
				type: String,
				default: ''
			},
			// 右侧的内容
			value: {
				type: String,
				default: ''
			},
			// 左侧图标名称
			icon: {
				type: String,
				default: ''
			},
			// 左侧图标是否自定义
			isCustomize: {
				type: Boolean,
				default: false
			},
			// 左侧图标尺寸
			iconSize: {
				type: Number,
				default: 23
			},
			// 左侧图标颜色
			iconColor: {
				type: String,
				default: '#333'
			},
			// 是否显示下边框
			border: {
				type: Boolean,
				default: true
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: '#f5f5f5'
			},
			// 点击后跳转的URL地址
			url: {
				type: String,
				default: ''
			},
			// 链接跳转的方式
			linkType: {
				type: String,
				default: 'navigateTo'
			},
			// 右侧图标名称
			rightIcon: {
				type: String,
				default: 'right'
			},
			// 是否展示右侧箭头并开启点击反馈
			isLink: {
				type: Boolean,
				default: true
			},
			// 点击是否触发震动
			isVibrate: {
				type: Boolean,
				default: false
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 标识符，用于在click事件中进行返回
			name: {
				type: [String, Number],
				default: ''
			},
			// 标题样式
			titleStyle: {
				type: Object,
				default: () => {}
			},
			// cell高度
			height: {
				type: String,
				default: ''
			},
			// 布局方向
			direction: {
				type: String,
				default: 'row'
			}
		},
		data() {
			return {};
		},
		computed: {
			bodyStyle() {
				const style = {
					'flex-direction': this.direction,
					'align-items': this.direction === 'column' ? 'flex-start' : 'center'
				}

				return style
			},
			sctionStyle() {
				const style = {
					'border-bottom': this.border ? `1px solid ${this.borderColor}` : 'none',
					'height': this.height
				}

				return style
			},
			bodyRightStyle() {
				const style = {
					'justify-content': this.direction === 'column' ? 'flex-start' : 'flex-end',
					'align-items': this.direction === 'column' ? 'flex-start' : 'center',
					'width': this.direction === 'column' ? '100%' : 'auto',
					'margin-top': this.direction === 'column' ? '20rpx' : '0',
					'padding-right': this.isLink ? '0' : '20rpx'
				}

				return style
			}
		},
		methods: {
			onCell() {
				if (this.disabled) {
					return false;
				}

				if (this.isVibrate) {
					uni.vibrate();
				}

				if (this.url) {
					uni[this.linkType]({
						url: this.url
					})
				}

				this.$emit('click', this.name)
			},
		}
	};
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.disabled {
		background-color: rgba(255, 255, 255, 0.5) !important;

		.title,
		.uni-icons,
		.label {
			color: #ccc !important;
		}
	}

	.active-cell {
		&:active {
			background-color: #f5f5f5;
		}
	}

	.cl-cell {

		background: #fff;
		padding-left: 30rpx;
		box-sizing: border-box;

		.cl-cell__icon {
			margin-right: 30rpx;
			line-height: 1;
		}

		.cl-cell__section {
			display: grid;
			grid-template-columns: 1fr auto;

			.cl-cell__body {
				position: relative;
				height: 100%;
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;

				.body__left {
					
					.body__left__title {
						display: flex;
						align-items: center;
					}

					.title {
						font-size: 28rpx;
						color: #333;
					}

					.label {
						font-size: 24rpx;
						color: #a1a2a6;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.body__right {
					flex: 1;
					padding-right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					box-sizing: border-box;
					width: 100%;
					font-size: 28rpx;
					color: #666;
				}
			}

			.right-icon {
				color: #808083;
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				padding-bottom: 4rpx;
				margin-left: 20rpx;
			}
		}


	}
</style>